<!--
 * @Author: your name
 * @Date: 2021-07-21 20:34:21
 * @LastEditTime: 2021-07-21 20:55:13
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \noproblemi:\实训东软H5\仓库\h5_2002\编码\cat\src\views\inquiry\Hospital.vue
-->


<template>
  <div class="hospital-container">
    <el-container class="out-container">
      <el-header class="header" height="120px">
          <div class="logo">
          <img src="../../assets/images/logo-title.png" alt="logo" />
        </div>
        <div class="nav">
          <el-menu class="menu" router mode="horizontal">
            <template v-for="item in menu">
              <el-menu-item
                v-if="!item.subs"
                :key="item.index"
                :index="item.index"
                >{{ item.label }}</el-menu-item
              >
              <el-submenu v-else :key="item.index" :index="item.index">
                <template #title>{{ item.label }}</template>
                <el-menu-item
                  v-for="subItem in item.subs"
                  :key="subItem.index"
                  :index="subItem.index"
                >
                  {{ subItem.label }}
                </el-menu-item>
              </el-submenu>
            </template>
          </el-menu>
        </div>
        <div class="user"></div>
      </el-header>
      <el-main class="out-main">
        <el-container class="inner-container">
          <el-header class="inner-header">
            <div class="inner-location">
                <div class="hospital-position">
                    分院地点：
                </div>
                <el-radio-group @change="Changehospital" ref="allradio" v-model="radio">
                    <el-radio v-for="(cityname,index) in citynames" :key="index" :label="cityname">{{cityname}}</el-radio>
                </el-radio-group>
            </div>
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }"
                  >首页</el-breadcrumb-item
                >
                <el-breadcrumb-item :to="{path:'/cater/diagnose'}">问诊预约</el-breadcrumb-item>
                <el-breadcrumb-item>分院列表</el-breadcrumb-item>
              </el-breadcrumb>
          </el-header>
          <el-main class="inner-main">
            <div class="block">
              <el-carousel trigger="click" height="580px" interval="6000">
                <el-carousel-item v-for="(msg,index) in hospitalmessage" :key="index">
                  <div class="hospital-message">
                    <div class="photo">
                      <img src="http://www.ananpet.com/Public/home/images/store/logo_2.png" alt="">
                    </div>
                    <div class="name">{{msg[0].name}}</div>
                    <div class="allmessage">
                      <div class="left-photo">
                        <img src="	http://www.ananpet.com/Public/Uploads/Hosteamimg/2018-11-21/5bf503992cbdb.png" alt="">
                      </div>
                      <div class="right">
                        <div class="message">
                          放心宠物诊所诊所位于上海杨浦区，隶属于上海安安宠物有限公司，是一家经
                          营了十多年的老牌宠物医院。长期的用心经营，令心安在广大顾客中拥有良好
                          口碑。上海心安不仅提供全方位的爱宠健康及诊疗服务，更是着力发展动物骨
                          外科,神经外科等特色科室。为了更好地治疗骨科疾病，上海心安引进了各类
                          诊疗设备，如C型臂，超声骨刀，TPLO骨板系统，PRCL高级锁定骨板系统等。
                          与此同时，上海心安还配备了沪上宠物医院少有的核磁设备，利用核磁共振，
                          医生们可以对宠物体内病变器官进行更精确地检查，提高治疗准确性。安安宠医·
                          上海心安宠物诊所将以更专业的技术，更严谨的态度，更先进的设备，为主人和爱
                          宠提供更安心，放心的诊疗服务。 
                        </div>
                        <div class="tl">
                          <i class="el-icon-phone"></i>
                          <div class="tel">联系电话：{{msg[0].tel}}</div>
                          <i class="el-icon-location-information"></i>
                          <div class="location">门店地址：{{msg[0].location}}</div>
                        </div>
                      </div>
                    </div>
                    <div class="time-button">
                      <el-button type="primary" round @click="dialogFormVisible  = true">立即预约</el-button>
                    </div>
                  </div>
                </el-carousel-item>
              </el-carousel>
            </div>
            <el-dialog title="诊疗预约表单" v-model="dialogFormVisible" destroy-on-close @close="clearform">
                        <el-form :model="form" ref="form" :rules="rules">
                          <el-form-item label="诊疗项目" prop="type" :label-width="formLabelWidth">
                            <el-select v-model="form.type" placeholder="请选择项目">
                              <el-option label="猫专科" value="1"></el-option>
                              <el-option label="软组织外科" value="2"></el-option>
                              <el-option label="骨科" value="3"></el-option>
                              <el-option label="内科" value="4"></el-option>
                              <el-option label="外科" value="5"></el-option>
                              <el-option label="牙科" value="6"></el-option>
                              <el-option label="皮肤科" value="7"></el-option>
                            </el-select>
                          </el-form-item>
                          <el-form-item label="预约时间" :label-width="formLabelWidth">
                            <el-col :span="11">
                              <el-form-item prop="date1">
                                <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
                              </el-form-item>
                            </el-col>
                            <el-col class="line" :span="2">-</el-col>
                            <el-col :span="11">
                              <el-form-item prop="date2">
                                <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
                              </el-form-item>
                            </el-col>
                          </el-form-item>
                          <el-form-item id="tel" label="联系电话" prop="tel" :label-width="formLabelWidth">
                            <el-input v-model="form.tel" ></el-input>
                          </el-form-item>
                          <el-form-item label="病情描述" :label-width="formLabelWidth">
                            <el-input type="textarea" v-model="form.desc"></el-input>
                          </el-form-item>
                        </el-form>
                        <template #footer>
                          <span class="dialog-footer">
                            <el-button type="primary" @click="submitForm('form')">提 交</el-button>
                            <el-button @click="resetForm('form')">重 置</el-button>
                          </span>
                        </template>
                      </el-dialog>
          </el-main>
        </el-container>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  created() {
    this.getcitymessage();
    console.log(this.hospitalmessage)
  },
  data() {
    return {
         menu: [
        {
          label: "猫猫市场",
          index: "/shop",
        },
        {
          label: "养猫指南",
          index: "/guide",
          subs: [
            {
              label: "猫猫信息",
              index: "/guide/info",
            },
            {
              label: "饲养指南",
              index: "/guide/feed",
            },
          ],
        },
        {
          label: "用品商城",
          index: "/goods",
        },
        {
          label: "猫猫护理",
          index: "/cater",
          subs: [
            {
              label: "美容预约",
              index: "/cater/beauty",
            },
            {
              label: "问诊预约",
              index: "/cater/diagnose",
            },
          ],
        },
        {
          label: "帮助中心",
          index: "/feedback",
        },
      ],
      radio: '上海',
      changelabel: 0,
      choosecity: '上海',
      citynames: ['上海','广州','北京','成都','绵阳','长沙','武汉'],
      hospitalmessage: [],
      cityhospitallists: [
        {
          // site: '上海',
          hospitalmessage1: [
            {
              name: '放心宠物诊所',
              tel: '121-28594004',
              location: '上海市杨浦区周家嘴路4825号'
          }],
          hospitalmessage2: [
            {
              name: '健安宠物诊所',
              tel: '121-74892297',
              location: '上海市长宁区长宁路1802号'
          }],
          hospitalmessage3: [
            {
              name: '丽芬宠物诊所',
              tel: '121-74892297',
              location: '上海市长宁区长宁路1602号'
          }]
        },
        {
          // site: '广州',
          hospitalmessage1: [
            {
              name: '安娜诊所',
              tel: '053-43540189',
              location: '广州市海珠区新港中路485号首层'
          }],
          hospitalmessage2: [
            {
              name: '园里诊所',
              tel: '053-55639163',
              location: '广州市名家区建设中路348号'
          }]
        },
        {
          // site: '北京',
          hospitalmessage1: [
            {
              name: '之外诊所',
              tel: '154-57013946',
              location: '北京闵行区莲花南路148号'
          }],
          hospitalmessage2: [
            {
              name: '维开诊所',
              tel: '154-18203944',
              location: '北京普陀区澳门路768号'
          }]
        },
        {
          // site: '成都',
          hospitalmessage1: [
            {
              name: '西家诊所',
              tel: '334-62790091',
              location: '四川省成都市高新区紫荆南路482号'
          }],
          hospitalmessage2: [
            {
              name: '礼盒诊所',
              tel: '334-79019384',
              location: '四川省成都市华阳区之末路782号'
          }]
        },
        {
          // site: '绵阳',
          hospitalmessage1: [
            {
              name: '起酥诊所',
              message: '',
              tel: '845-09837738',
              location: '绵阳市丰泽区福新花园成A45店面'
          }],
          hospitalmessage2: [
            {
              name: '香花园诊所',
              tel: '845-13000294',
              location: '绵阳市自得区花间路4587号'
          }]
        },
        {
          // site: '长沙',
          hospitalmessage1: [
            {
              name: '安安诊所',
              message: '',
              tel: '272-76609203',
              location: '长沙市钟楼区水杉路宝龙广场C区53号楼18-22(青枫公园南大门对面)'
          }],
          hospitalmessage2: [
            {
              name: '金兰诊所',
              tel: '272-09778192',
              location: ''
          }]
        },
        {
          // site: '武汉',
          hospitalmessage1: [
            {
              name: '期卡诊所',
              message: '',
              tel: '884-81990333',
              location: '武汉市江阳区水杉路宝龙广场C区53号楼18-22'
          }],
          hospitalmessage2: [
            {
              name: '自明诊所',
              message: '',
              tel: '884-98843949',
              location: '武汉市兰坎区笋话路45号'
          }]
        }
      ],
      dialogFormVisible: false,
      form: {
          type: '',
          tel: '',
          date1: '',
          date2: '',
          desc: ''
        },
      saveform: {
          savetype: '',
          savetel: '',
          savedate1: '',
          savedate2: '',
          savedesc: ''
      },
      formLabelWidth: '120px',
       rules: {
          type: [
            { required: true, message: '请选择诊疗项目', trigger: 'change' }
          ],
          tel: [
            { required: true,message:'请输入联系电话' ,trigger: 'blur' },
          ],
          date1: [
            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
          ],
          date2: [
            { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
          ]
        }
    };
  },
  methods: {
    getcitymessage() {
      if(this.choosecity == '上海'){
        this.hospitalmessage = this.cityhospitallists[0]
      }
      else if(this.choosecity == '广州'){
        this.hospitalmessage = this.cityhospitallists[1]
      }
      else if(this.choosecity == '北京'){
        this.hospitalmessage = this.cityhospitallists[2]
      }
      else if(this.choosecity == '成都'){
        this.hospitalmessage = this.cityhospitallists[3]
      }
      else if(this.choosecity == '绵阳'){
        this.hospitalmessage = this.cityhospitallists[4]
      }
      else if(this.choosecity == '长沙'){
        this.hospitalmessage = this.cityhospitallists[5]
      }
      else{
        this.hospitalmessage = this.cityhospitallists[6]  
      }
    },
    Changehospital(label) {
      this.choosecity = label
      console.log(label);
      console.log(this.choosecity);
      this.getcitymessage();
      console.log(this.hospitalmessage)
    },
    submitForm(form) {
      this.$refs[form].validate((o,e) => {
        if (o) {
          // alert('success submit!')
          // this.saveform.savetel = document.getElementById("tel").value
          // console.log(this.saveform.savetel)
          this.dialogFormVisible = false
          console.log(document.getElementById("tel").value)
          console.log(e)

        } else {
          // alert('error submit!');
          console.log('error submit!!')
          return false;
        }
      });
    },
    resetForm(form) {
      this.$refs[form].resetFields();
    },
    clearform() {
      this.form.type = '',
      this.form.tel = '',
      this.form.date1 = '',
      this.form.date2 = '',
      this.form.desc = ''
    }
  },
};
</script>

<style lang="less" scoped>
.hospital-container {
  height: calc(100vh);
  .out-container {
    .out-main {
      // background-color: antiquewhite;
      .inner-container {
        .inner-header {
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          height: 200px;
          margin-bottom: 20px;
          box-shadow: 1px 1px 3px rgb(143, 136, 136);
          .hospital-position {
            width: 90px;
          }
          .inner-location{
              display: flex;
          }
          .el-radio-group {
            .el-radio {
              margin-top: 10px;
              margin-left: 20px;
              .el-radio__label {
                font-size: 18px !important;
              }
            }
          }
        }
        .inner-main {
          height: 650px;
          // background-color: bisque;
          .block {
            height: 600px;
            // background-color: bisque;
            .hospital-message {
              .photo {
                height: 100px;
                img {
                  width: 300px;
                  height: 80px;
                }
              }
              .name {
                text-align: center;
                font-size: 25px;
                height: 80px;
              }
              .allmessage {
                display: flex;
                height: 300px;
                .left-photo {
                  height: 300px;
                  width: 500px;
                  img {
                    height: 280px;
                  }
                }
                .right {
                  width: 700px;
                  height: 300px;
                }
              }
              .message {
                height: 200px;
              }
              .tl {
                display: flex;
                height: 100px;
                .tel {
                  width: 300px;
                }
                .location {
                  width: 500px;
                }
              }
              .time-button {
                height: 80px;
                margin-left: 650px;
              }
            }

          }
        }
      }
    }
  }
}
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  padding-left: 32px;

  img {
    height: 100px;
  }
}

.menu {
  border-bottom-color: #f9c3c5 !important;
}

.page {
  width: 100%;
  height: 100%;
}
</style>